<template>
  <div>
    <Row>
      <Col span="24">
      <Card>
        <p slot="title">
          <Icon type="ios-list"></Icon>
          字典类型列表
        </p>

        <Row>
          <Input v-model="searchModel.dictName" placeholder="请输入字典类型名称..." style="width: 300px"></Input>
          <Button type="primary" shape="circle" @click="searchDict" :loading="searchLoading" icon="ios-search">
            <span>搜索字典</span>
          </Button>
        </Row>
        <Row>
          <Button type="info" icon="person-add" style="margin-top:10px;"
                  v-hasPermissionButton="'/admin/dict/addDictButton'" @click="openAddDict">
            <span>添加字典</span>
          </Button>
        </Row>
        <Row>
          <Table border highlight-row @on-current-change="checkDict" :columns="columnHeader" :data="dictList"></Table>
        </Row>
        <Row>
          <Page :total="total" :current="current" :page-size="pageSize" :show-tota="showTotal" @on-change="onChange"
                show-elevator></Page>
        </Row>


      </Card>
      <Card>
        <Row v-if="showDictInfoTable">
          <Button type="info" icon="person-add" style="margin-top:10px;"
                  v-hasPermissionButton="'/admin/dict/addDictInfoButton'" @click="openAddDictInfo">
            <span>添加字典值</span>
          </Button>
          <Table border :columns="columnDictInfoHeader" :data="dictInfoList"></Table>
        </Row>
      </Card>

      </Col>
    </Row>
  </div>
</template>
<script>
  import util from '@/lib/util.js';

  export default {
    data() {
      return {
        searchModel: {
          dictName: '',
          pageSize: 10,
          pageNum: 1
        },
        columnHeader: [
          {
            type: 'index',
            width: 60,
            fixed: 'left'
          },
          {
            title: '字典名称',
            key: 'dictName',
            width: 200,
            fixed: 'left'
          },
          {
            title: '字典编码',
            key: 'dictCode',
            width: 250,
            fixed: 'left'
          },
          {
            title: '创建时间',
            key: 'createDate',
            width: 200,
            fixed: 'left'
          },
          {
            title: '创建人',
            key: 'createUserId',
            width: 200,
            fixed: 'left'
          },
          {
            title: '字典简介',
            key: 'dictDesc',
            width: 200,
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'action',
            width: 250,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editDict(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/dict/editDictButton'
                    }
                  ]
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.removDict(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/dict/deleteDictButton'
                    }
                  ]
                }, '删除')
              ]);
            }
          }
        ],
        dictList: [],
        searchLoading: false,
        total: null,
        current: null,
        pageSize: null,
        showTotal: true,
        columnDictInfoHeader: [
          {
            type: 'index',
            width: 60,
            fixed: 'left'
          },
          {
            title: '字典编码',
            key: 'dictCode',
            width: 250,
            fixed: 'left'
          },
          {
            title: '字典key',
            key: 'dictInfoValue',
            width: 200,
            fixed: 'left'
          },
          {
            title: '字典名称',
            key: 'dictInfoName',
            width: 250,
            fixed: 'left'
          },
          {
            title: '字典简介',
            key: 'dictInfoDesc',
            width: 200,
            fixed: 'left'
          },
          {
            title: '操作',
            key: 'action',
            width: 250,
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.editDictInfo(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/dict/editDictInfoButton'
                    }
                  ]
                }, '编辑'),
                h('Button', {
                  props: {
                    type: 'error',
                    size: 'small'
                  },
                  style: {
                    marginRight: '5px'
                  },
                  on: {
                    click: () => {
                      this.removDictInfo(params.row)
                    }
                  },
                  directives: [
                    {
                      name: 'hasPermissionButton',
                      value: '/admin/dict/deleteDictInfoButton'
                    }
                  ]
                }, '删除')
              ]);
            }
          }
        ],
        dictInfoList: [],
        showDictInfoTable: false
      }
    },
    methods: {
      searchDict() {

      },
      openAddDict() {

      },
      openAddDictInfo() {

      },
      onChange(pageNum) {

      },
      editDict(dict) {

      },
      removDict(dict) {

      },
      editDictInfo(dict) {

      },
      removDictInfo(dict) {

      },
      getDictPage() {
        let that = this;
        util.queryPost('/admin/dict/page', this.searchModel, function (data) {
          data.list.forEach(dict => {
            that.dictList.push(dict);
          });
          that.total = data.total;
          that.current = data.pageNum;
          that.pageSize = data.pageSize;
        })
      },
      checkDict(currentRow, oldCurrentRow) {
        this.showDictInfoTable = true;
        let that = this;
        this.dictInfoList = [];
        util.post('/admin/dict/getDictInfo', {
          dictId: currentRow.dictId
        }, function (data) {
          data.forEach(dictInfo => {
            dictInfo.dictCode = currentRow.dictCode;
            that.dictInfoList.push(dictInfo);
          })
        })
      }

    },
    mounted() {
      this.getDictPage();
    },
    created() {

    }
  }

</script>
